<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
  <title>比较排序</title>
  <script src="../../../jquery-3.5.0.min.js"></script>
  <script src="./index.js"></script>
  <script >比较排序</script>

  <script type = "application/javascript" src = "././src/js/common/AnimationManager.js"> </script>
  <script type = "application/javascript" src = "././src/js/common/ObjectManager.js"> </script>
  <script type = "application/javascript" src = "././src/js/common/AnimatedObject.js"> </script>
  <script type = "application/javascript" src = "././src/js/common/AnimatedCircle.js"> </script>
  <script type = "application/javascript" src = "././src/js/common/AnimatedHighlightCircle.js"> </script>
  <script type = "application/javascript" src = "././src/js/common/AnimatedLine.js"> </script>
  <script type = "application/javascript" src = "././src/js/common/AnimatedRectangle.js"> </script>
  <script type = "application/javascript" src = "././src/js/common/AnimatedPointer.js"> </script>
  <script type = "application/javascript" src = "././src/js/common/AnimatedHighlightRectangle.js"> </script>
  <script type = "application/javascript" src = "././src/js/common/Algorithm.js"> </script>
  <script type = "application/javascript" src = "././src/js/sort/compareSort.js"> </script>
  <script>
    var type=0;
    var index;
  </script>

</head>
<body onload="init();ini();">

<div class="mainSub">
    <div class="header">
      <div id="zut_logo">
        <a href="https://www.zut.edu.cn/" id="zut_home">
          <img class="zut-logo" src="../../../static/img/zut_logo.jpg" alt="到中原工学院校网" title="到中原工学院">
        </a>
      </div>
      <div id="home_logo">
        <img class="home-logo" src="../../../static/img/home_logo.jpg" alt="转到首页" onclick="window.location.href='index.html'"/>
      </div>
<!--      选择栏-->
      <div class="navList">
        <a href="compareSort.html" class="nav selected" style="text-decoration:none;">比较排序</a>
        <a href="radixSort.html" class="nav" style="text-decoration:none;">基数排序</a>
        <a href="heapSort.html" class="nav" style="text-decoration:none;">堆排序</a>
      </div>
    </div>
<!--    显示栏-->
    <div class="showBox"  style="overflow: scroll;">
      <canvas id="drawing" >Canvas</canvas>
    </div>
<!--    左侧开始按纽-->
  <div class="sortStartHide">
    <img src="" alt="" />
  </div>
  <div class="compareSortStarts">
    <p class="r1">生成数组</p>
    <p class="r2">排序</p>
  </div>
  <div class="arrayLength subC1">
    <span>长度</span>
    <input type="text" class="sortArrayLength"/>
  </div>
  <div class="createArray subC1">
    <p>生成</p>
  </div>
  <div class="insertSort subC2">
    <p>插入排序</p>
  </div>
  <div class="selectSort subC2">
    <p>选择排序</p>
  </div>
  <div class="bubbleSort subC2">
    <p>冒泡排序</p>
  </div>
  <div class="shellSort subC2">
    <p>希尔排序</p>
  </div>
  <div class="quickSort subC2">
    <p>快速排序</p>
  </div>
  <div class="mergeSort subC2">
    <p>归并排序</p>
  </div>


<!--    右侧状态栏-->
  <div class="stateHide">
    <img src="" alt="" />
  </div>
  <div class="state">
    <p></p>
  </div>
<!--    右侧代码追踪栏-->
    <div class="codeHide">
      <img src="" alt=""/>
    </div>
    <div  class="codes">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
    <!--播放速度控制栏-->
    <div class="controlBar">
      <input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
    </div>
    <div class="bottom">
      <a href="http://beian.miit.gov.cn/" target="_blank">滇ICP备20003027号-1</a>
    </div>

  </div>



</body>
<style>
  @import "../../../static/css/common.css";
  @import "../../../static/css/sort.css";
  @import "../../../static/css/state.css";
  @import "../../../static/css/code.css";
  @import "../../../static/css/controbar.css";
</style>
</html>